<template>
  <el-switch size="small" v-model="valueModel" :active-value="!reverse" :inactive-value="reverse"></el-switch>
</template>

<script>
/* eslint-disable */

/**
 * 开关
 */
export default {
    name: "SeaSwitch"
    , components: {}
    , props: {
        value: {type: [Number, Boolean, String], default: false}
        // 文字提示
        , placeholder: {type: String, default: ''}
        // 是否需要到倒置选项：true的时候取消选中，false的时候选中
        // 默认倒置，这与后台设计有关，是否可用字段通常是 is_disabled 而不是 enabled
        , reverse: {type: Boolean, default: true}
    }, model: {
        // 需要定义哪一个props可以用v-model绑定属性
        prop: 'value',
        // 声明一个事件，调用之后，就会改变父级容器的值
        event: 'handlerValueChange'
    }, computed: {
        valueModel: {
            get: function () {
                //实际使用的是value值
                return this.value;
            },
            set: function (val) {
                //侦听到setter()事件，将值传递回父级组件
                this.$emit('handlerValueChange', val);
                this.$emit('change', val);
            }
        }
    }
}
</script>
